<template>
    <div class="guidea">
        <el-button type="info">资讯导购</el-button>
        <div class="bianxiang"></div> 
        <div>
            <div class="wenzhang clear">
                <div class="but">
                   <el-button type="success" @click="addGuide()">
                    添加文章
                    </el-button> 
                </div>
                <div class="flex-header">
                   <div class="wenzhang_one">
                    <h5>状态</h5>
                    <div class="wenzhang_one_one">
                        <template>
                            <el-select v-model="value" placeholder="全部">
                                <el-option
                                v-for="(item,index) in options"
                                :key="index"
                                :label="item.value"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </div>
                </div>
                <div class="wenzhang_two">
                    <h5>编辑</h5>
                    <template>
                        <el-select v-model="value" placeholder="全部">
                            <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </div>
                <div class="wenzhang_three">
                    <h5>栏目</h5>
                    <template>
                        <el-select v-model="value" placeholder="全部">
                            <el-option
                            v-for="item in options3"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </div>
                <div class="inputkuang_one">
                    <h5>文章标题</h5>
                    <div class="inputkuang_one_one">
                        <el-autocomplete
                        popper-class="my-autocomplete"
                        v-model="state"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        @select="handleSelect">
                        <i
                            class="el-icon-edit el-input__icon"
                            slot="suffix"
                            @click="handleIconClick">
                        </i>
                        <template slot-scope="{ item }">
                            <div class="name">{{ item.value }}</div>
                            <span class="addr">{{ item.address }}</span>
                        </template>
                    </el-autocomplete>
                    </div>
                    <el-button type="success">搜索</el-button>
                </div>
                </div>
            </div>
            <el-table :data="datata" style="width: 100%">
                <el-table-column prop="article_title" label="文章标题" width=""></el-table-column>
                <el-table-column prop="column" label="栏目" width=""></el-table-column>
                <el-table-column prop="edit" label="编辑" width=""></el-table-column>
                <el-table-column prop="page_view" label="浏览量" width=""></el-table-column>
                <el-table-column prop="consultation_status" label="状态" width=""></el-table-column>
                <el-table-column prop="release_time" label="发布时间" width=""></el-table-column>
                <el-table-column prop="status" label="操作" width="210">
                    <template>
                        <el-button @click="dialogFormVisible = true"> 修改</el-button>
                        <el-button> 删除</el-button>
                    </template>
                </el-table-column>
                <el-pagination
                    :page-size='2'
                    layout="prev, pager, next"
                    :page-count="pageCount"
                    @current-change="fenye">
                </el-pagination>
            </el-table>
            <!-- //修改文章表// -->
            <el-dialog title="修改文章" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="文章标题" :label-width="formLabelWidth">
                    <el-input v-model="form.article_title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属栏目" :label-width="formLabelWidth">
                    <el-select v-model="form.column" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="关联楼盘" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="导读" prop="guide">
                    <el-input type="textarea" v-model="form.guide"></el-input>
                    </el-form-item>
                    <el-upload
                        class="upload-demo"
                        action=""
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload> 
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import uitls from '../utils/uitls.js'
import * as api from '../utils/api'
    export default {
        name: "Guide",
        data() {
            return {
                //管理员input输入框
            restaurants: [],
            state: '',
            //管理员select选择器
            options: [{
            value: '等待审核',
            label: '1'
            },{
            value: '通过审核',
            label: '2'  
            },{
             value: '未通过审核',
            label: '3'    
            }],
            options2: [{
            value: '4',
            label: '天明'
            },{
                value: '5',
            label: '少司命'
            },{
                value: '6',
            label: '卫庄'
            }],
            options3: [{
            value: '7',
            label: '行业资讯'
            },{
            value: '8',
            label: '楼盘动态'
            },{
            value: '9',
            label: '导购'
            }],
            value: '',
            datata:[{
                article_title:'有钱就是任性？！探究通州万达广场实际生活',
                column:'行业资讯',
                edit:'少司命',
                page_view:'123',
                consultation_status:'通过审核',
                release_time:'2020-2-10',
            },{
                article_title:'6个月劲销10000套 空港家园领跑固安楼市',
                column:'楼盘动态',
                edit:'天明',
                page_view:'',
                consultation_status:'等待审核',
                release_time:'2020-1-20',
            },{
                article_title:'揽胜独此处 生态宜居大盘华银天鹅湖',
                column:'导购',
                edit:'卫庄',
                page_view:'',
                consultation_status:'未通过审核',
                release_time:'20-20-10-20',
            }],
            fileList: [{name: '', url: ''}],
            dialogFormVisible: false,
            form: {
                article_title: '',
                column: '',
                guide: ''
            },
            formLabelWidth: '120px',
            pageCount:1,
            currentPage:1,
            totalPage:2,
            }
        },
        methods: {
                //管理员input输入框
            querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            cb(results);
            },
            createFilter(queryString) {
            return (restaurant) => {
            return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
            },
            loadAll() {
            return [
            { "value": "", "address": "" },
            ];
            },
            handleSelect(item) {
        
            },
            handleIconClick(ev) {
        
            },
            handlePreview(file) {
                console.log(file);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            getallGuide(){
            console.log(this.currentPage);
             this.axios({
                method:'get',
                url:api.GET_QUERY,
                params:{
                    // currentPage:this.currentPage,
                    // pageSize:1,
                }
            }).then((data)=>{
                // this.pageCount =data.data.data.totalPage
                console.log(data);
                // this.datata = data.data.data
            })
            },
            // fenye(val){
            // this.currentPage = val;
            
            // this.getallGuide()

            // },
            addGuide(){
                
            }
        },
        mounted() {
            //管理员input输入框
            this.restaurants = this.loadAll();
        },
        created(){
            this.getallGuide()
        }, 
    }
</script>

<style lang='less' scoped>
.clear:after {
    content: "";
    display: block;
    clear: both;
}
.wenzhang .but{
    padding: 2% 0;
}
.guidea{
    width: 98%;
    margin: 0 auto;
    margin-top: 15px;
}
.flex-header{
    display:flex;
    margin-bottom: 15px;
    justify-content: space-between;
    >div{
        width:180px;
    }
    [class^="inputkuang"]{
        width:250px;
    .inputkuang_one_one{
        width: 180px;
        float: left;
        }
    }
}
</style>